<template>
    <view class="one">
        <!-- 结算 -->
        <view class="header" v-if="!$u.test.isEmpty(usership)" @click="add_address()">
            <view class="header_message">
                <text>收货信息</text>
                <text class="font_item">编辑信息></text>
            </view>
            <view class="font_big">
                <text class="font_ont">{{ usership.area_name }}</text>
                <text class="font_two">{{ usership.address }}</text>
                <text class="font_three">{{ usership.name }} {{ usership.mobile }}</text>
            </view>
        </view>

        <view class="header2" v-else>
            <view class="header_font" @click="add_address()"><text>+ 添加收货地址</text></view>
        </view>

        <!-- 商品信息 -->
        <view class="blurb">
            <view class="header_message"><text>商品信息</text></view>
            <view class="blurb_item" v-for="(item, index) in productList" :key="index">
                <view class="item_icon"><image :src="item.products.image_path"></image></view>
                <view class="item_font">
                    <text>{{ item.products.name }}</text>
                    <view class="number">
                        <view class="total">￥{{ item.products.price }}</view>
                        <view class="amount">
                            <!--数量：{{ item.nums }}-->
                            <u-number-box v-model="productList[index].nums" @change="numsChange" :min="1"
                                    :disabled="!ids?false: true"></u-number-box>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部信息 -->
        <view class="bottom">
            <!-- 积分抵扣 -->
            <view class="point">
                <view class="point_item">
                    <view class="point_col">
                        <text class="col_title">当前积分</text>
                        <text class="col_val">{{ integral }}</text>
                    </view>
                    <view class="point_col">
                        <text class="col_title">抵扣比例</text>
                        <text class="col_val">{{ ratio }} : 1</text>
                    </view>
                    <view class="point_col">
                        <text class="col_title">抵扣积分</text>
                        <input type="number" @change="change" v-model="point" placeholder="输入积分" min="0" />
                    </view>
                </view>
                <view class="point_tips">
                    积分最多只能抵扣订单金额的
                    <text>{{ mix }}%</text>
                </view>
            </view>
            <view class="bottom_item" >
                <view class="money">
                    <text class="tt">￥{{ parseFloat(totalPrice).toFixed(2) }}</text>
                    <text>({{ parseFloat(total).toFixed(2) }} - {{  parseFloat(points / ratio).toFixed(2) }})</text>
                </view>
                <button @click="send()" style="margin: unset;">{{!ids?'提交订单':'重新支付'}}</button>
            </view>
        </view>
        <u-popup v-model="popupShow" mode="center" border-radius="20">
            <view style="padding: 50rpx;">
                <view style="font-size: 35rpx;font-weight: bold;text-align: center;">输入密码</view>
                <view style="display: flex;font-size: 30rpx;padding: 50rpx 0;">
                    <!-- <view style="width: 150rpx;text-align: right;">密码：</view> -->
                    <view>
                        <input type="number" v-model="password" maxlength="6" placeholder="请输入六位密码" password
                               style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>
                <view>
                    <button @click="sendPassword" style="background-color: #18B566;color: #FFFFFF;"
                            :disabled="disabledStatus">支付
                    </button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                usership: {},
                productList: [],
                cart_ids: '',
                area_id: '',
                ratio: 0,
                integral: 0,
                point: 0,
                points: 0,
                mix: 0,
                total: 0,
                popupShow: false,
                password: '',
                disabledStatus: false,
                ids: ''
            };
        },
        onLoad (options) {
            this.cart_ids = options.id;
            this.getPoint();
            this.getUserinfo();
        },
        onShow () {
            this._getuserdefaultship();
        },
        computed: {
            //计算选中的商品价格
            totalPrice () {
                var totalPrice = 0;
                this.productList.map(item=>{
                    totalPrice += item.nums*item.products.price;
                });
                this.total = totalPrice;
                totalPrice = (totalPrice*100 - (this.points/this.ratio)*100)/100;
                return totalPrice;
            }
        },
        methods: {
            numsChange (e) {

            },
            change (e) {
                var v = Math.floor(e.detail.value);
                this.point = v;
                if ( v<=0 ) {
                    this.point = 0;
                } else {
                    var money = Math.floor(this.totalPrice*this.ratio*(this.mix/100));
                    var min = Math.min(this.integral, money);
                    if ( v>=min ) {
                        this.point = min;
                    }
                }
                this.points = this.point;
            },
            getPoint () {
                this.$u.api.getPoint().then(res=>{
                    this.ratio = res.point;
                    this.mix = res.orders_point_proportion;
                });
            },
            getUserinfo () {
                this.$u.api.getInfo().then(res=>{
                    this.integral = res.point;
                });
            },
            DemoClick () {
                uni.navigateBack({
                    delta: 1
                });
            },
            add_address () {
                uni.navigateTo({
                    url: '/shop/pages/list/accountDemo1?type=2'
                });
            },
            // 地址管理
            _getuserdefaultship () {
                this.$u.api
                // .getUserinfo()
                .getuserdefaultship()
                .then(r=>{
                    if ( this.$u.test.isEmpty(r) ) {
                        uni.showModal({
                            title: '提示',
                            content: '没有设置地址，请去设置',
                            showCancel: false,
                            success: res=>{
                                if ( res.confirm ) {
                                    this.add_address();
                                }
                            }
                        });
                    } else {
                        this.usership = r;
                        this._postGetCartList();
                        this._getusership();
                    }
                })
                .catch(err=>{
                });
            },
            //  购物车
            _postGetCartList () {
                this.$u.api
                .postGetCartList({
                    ids: this.cart_ids,
                    area_id: this.usership.area_id
                })
                .then(res=>{
                    this.productList = res.list;
                })
                .catch(e=>{
                });
            },
            send () {
                if (!this.ids){
                    this._postOrderCreate();
                }else{
                    this.orderPay(this.ids);
                }
            },
            // 下订单
            _postOrderCreate () {
                var that = this;
                that.$u.api
                .postOrderCreate({
                    area_id: that.usership.area_id,
                    uship_id: that.usership.id,
                    cart_ids: that.cart_ids,
                    point: that.point
                })
                .then(res=>{
                    var order_id = res.order_id;

                    /*uni.showModal({
                        title: '提示',
                        content: '下单成功',
                        showCancel: false,
                        success: res=>{
                            if ( res.confirm ) {
                                this.$store.commit('setOrder', 1);
                                uni.redirectTo({
                                    url: '/shop/pages/list/myOrder?id=1'
                                });
                            }
                        }
                    });*/
                    that.orderPay(order_id);
                })
                .catch(err=>{
                    uni.showToast({
                        title: err.msg,
                        duration: 2000,
                        icon: 'none'
                    });
                });
            },
            sendPassword() {
                if(this.$u.test.isEmpty(this.password)) {
                    uni.showToast({
                        title: '请输入密码',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                this._postUserOrderPay(this.ids, 1);
            },
            /*支付订单*/
            orderPay(ids) {
                var that = this;
                that.ids = null;
                that.password = '';
                uni.showModal({
                    title: '提示',
                    content: '选择支付方式',
                    cancelText: '余额支付',
                    confirmText: '微信支付',
                    success: (res) => {
                        if (res.confirm) {
                            that._postUserOrderPay(ids, 2);
                        } else if (res.cancel) {
                            that.popupShow = true;
                            that.ids = ids;
                            // this._postUserOrderPay(ids, 1);
                        }
                    }
                });
            },
            _postUserOrderPay(ids, type) {
                let pamams = {};
                if(type == 1) {
                    pamams = {
                        ids: ids,
                        payment_code: 'balancepay',
                        payment_type: '1',
                        password: this.password,
                    };
                } else if (type == 2) {
                    pamams = {
                        ids: ids,
                        payment_code: 'wechatpay',
                        payment_type: '1',
                        params: {
                            // return_url: '/shop/pages/list/myOrder?id=1',
                            trade_type: 'JSAPI'
                        }
                    };
                } else {
                    uni.showToast({
                        title: '支付出错',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                this.disabledStatus = true;
                this.$u.api.postUserOrderPay(pamams).then(res => {
                    if(type == 2) {
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: res.timeStamp,
                            nonceStr: res.nonceStr,
                            package: res.package,
                            signType: res.signType,
                            paySign: res.paySign,
                            success: (wxres) => {
                                uni.showToast({
                                    title: '支付成功',
                                    duration: 1000
                                });
                                // if(uni.getStorageSync('isMessage') != 1) {
                                uni.showModal({
                                    title: '提示',
                                    content: '是否授权订阅消息',
                                    success: function (res) {
                                        if (res.confirm) {
                                            // uni.setStorageSync('isMessage', 1);
                                            uni.requestSubscribeMessage({
                                                tmplIds: [
                                                    getApp().globalData.capitalKey,
                                                    // getApp().globalData.dispatchKey,
                                                    // getApp().globalData.orderTakingKey,
                                                ],
                                            })
                                            setTimeout(function(){
                                                uni.redirectTo({
                                                    url: '/shop/pages/list/myOrder?id=1'
                                                });
                                            },1000)
                                        } else if (res.cancel) {
                                            setTimeout(function(){
                                                uni.redirectTo({
                                                    url: '/shop/pages/list/myOrder?id=1'
                                                });
                                            },1000)
                                        }
                                    }
                                });
                            },
                            fail: (wxerr) => {
                                uni.showToast({
                                    title: '支付失败',
                                    duration: 1000,
                                    icon: 'none'
                                });
                                setTimeout(function(){
                                    uni.redirectTo({
                                        url: '/shop/pages/list/myOrder?id=1'
                                    });
                                },1000)
                            }
                        })
                    } else {
                        this.disabledStatus = false;
                        this.ids = null;
                        uni.showToast({
                            title: '支付成功',
                            duration: 1000
                        });
                        uni.showModal({
                            title: '提示',
                            content: '是否授权订阅消息',
                            success: function (res) {
                                if (res.confirm) {
                                    // uni.setStorageSync('isMessage', 1);
                                    uni.requestSubscribeMessage({
                                        tmplIds: [
                                            getApp().globalData.capitalKey,
                                            // getApp().globalData.dispatchKey,
                                            // getApp().globalData.orderTakingKey,
                                        ],
                                        complete (res){
                                            uni.redirectTo({
                                                url: '/shop/pages/list/myOrder?id=2'
                                            });
                                        }
                                    })
                                } else if (res.cancel) {
                                    setTimeout(function(){
                                        uni.redirectTo({
                                            url: '/shop/pages/list/myOrder?id=2'
                                        });
                                    },1000)
                                }
                            }
                        });
                    }
                }).catch(err => {
                    this.disabledStatus = false;
                    uni.showToast({
                        title: err.msg,
                        duration: 1000,
                        icon: 'none',
                    });
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
.one {
    background-color: #f7f7f7;
}
.nav-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    flex-wrap: wrap;
    position: relative;
    .btn {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        image {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            left: 30rpx;
        }
        text {
            font-size: 38rpx;
            color: #191919;
            font-weight: bold;
        }
    }
}
.header {
    width: calc(100% - 40rpx);
    height: 321rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-top: 20rpx;
    border: 1px solid #f2f2f2;
    margin: 20rpx auto;
    .header_message {
        display: flex;
        height: 80rpx;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        padding: 0 20rpx;
        text {
            width: 100%;
            font-size: 32rpx;
            color: #666666;
            font-weight: bold;
        }
        .font_item {
            width: 180rpx;
            height: 52rpx;
            background-color: #f2f2f2;
            border-radius: 24rpx;
            font-size: 24rpx;
            color: #999999;
            text-align: center;
            font-weight: bold;
            line-height: 52rpx;
        }
    }
    .font_big {
        display: flex;
        flex-wrap: wrap;
        margin: 20rpx 0 0 30rpx;
        .font_ont {
            width: 100%;
            font-size: 28rpx;
            color: #999999;
            margin-bottom: 20rpx;
            font-weight: bold;
        }
        .font_two {
            width: 100%;
            font-size: 40rpx;
            color: #191919;
            margin-bottom: 20rpx;
            font-weight: bold;
        }
        .font_three {
            width: 100%;
            font-size: 28rpx;
            color: #191919;
        }
    }
}

.header2 {
    display: flex;
    width: calc(100% - 40rpx);
    height: 120rpx;
    background-color: #ffe4db;
    border-radius: 20rpx;
    border: solid 2rpx #ffdace;
    margin: 0 auto;
    margin-top: 20rpx;
    align-items: center;
    justify-content: center;
    .header_font {
        width: 224rpx;
        text {
            flex: 1;
            font-size: 30rpx;
            color: #ff4200;
            font-weight: bold;
            text-align: center;
        }
    }
}

.blurb {
    display: flex;
    width: calc(100% - 40rpx);
    background-color: #ffffff;
    border-radius: 20rpx;
    border: 1px solid #f2f2f2;
    flex-wrap: wrap;
    margin: 20rpx auto;
    margin-top: 30rpx;
    .header_message {
        width: 100%;
        font-size: 32rpx;
        color: #666666;
        font-weight: bold;
        margin: 20rpx 0 20rpx 20rpx;
        padding-bottom: 25rpx;
        border-bottom: 1px solid #f2f2f2;
    }
    .blurb_item {
        display: flex;
        width: 100%;
        margin: 10rpx 10rpx 0 10rpx;
        text-align: left;
        .item_icon {
            background-color: #ffffff;
            margin: 0 20rpx 20rpx 10rpx;
            image {
                width: 150rpx;
                height: 150rpx;
            }
        }
        .item_font {
            display: flex;
            width: calc(100% - 190rpx);
            flex-wrap: wrap;
            text-align: center;
            align-items: center;
            text {
                width: 100%;
                font-size: 34rpx;
                color: #191919;
                font-weight: bold;
                text-align: left;
            }
            .number {
                display: flex;
                width: 100%;
                justify-content: space-between;
                padding-bottom: 30rpx;
                .amount {
                    font-size: 30rpx;
                    color: #999999;
                }
                .total {
                    font-size: 30rpx;
                    color: #ff4200;
                    /*padding-left: 250rpx;*/
                }
            }
        }
    }
}

.bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: 1px solid #f2f2f2;
    /*position: fixed; !* 窗口定位*!*/
    /*bottom: 0;*/
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    padding-bottom: 50rpx;
    .point {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 40rpx;

        .point_item {
            width: 100%;
            margin: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .point_col {
                display: flex;
                flex-direction: column;
                align-items: center;
                .col_title {
                    font-size: 30rpx;
                    color: #666666;
                    margin-bottom: 15rpx;
                }
                .col_val {
                    font-size: 40rpx;
                    color: #ff4200;
                }
                input {
                    width: 25vw;
                    font-size: 40rpx;
                    padding: 10rpx;
                    border-bottom: 1rpx solid #666666;
                }
            }
        }
        .point_tips {
            font-size: 28rpx;
            margin: 10rpx;
            text {
                color: #ff4200;
                font-size: 34rpx;
            }
        }
    }
    .bottom_item {
        display: flex;
        width: 100%;
        justify-content: space-between;
        
        .money{
            display: flex;
            flex-direction: column;
            .tt{
                font-size: 50rpx;
                color: #ff4200;
                flex: 1;
            }
        }
        
        button {
            width: 229rpx;
            height: 78rpx;
            background-color: #ff4200;
            border-radius: 39rpx;
            font-size: 32rpx;
            color: #ffffff;
            margin-left: auto;
            margin-right: 30rpx;
        }
    }
}
</style>
